<script setup lang="ts">
const name = "animaCard2"
import {ref , onMounted , toRefs} from "vue"
import Typed from "typed.js";

let typed: any = null;
const pRef = ref<HTMLParagraphElement>();


onMounted(() => {
    // console.log('_______')

    if (pRef.value) {
        const options = {
            strings: ["Arpat The Great"],
            typeSpeed: 60,
            showCursor: false,
        };
        typed = new Typed(pRef.value, options);
    }
})

const checkBtn = () => {
    typed?.reset();
    typed?.start();
}



</script>

<template>
    <div class="animaCard2">
        <div class="textView" >
            <p ref="pRef" />
        </div>
        <el-button type="primary" size="large" @click="checkBtn" >{{ name }}</el-button>
    </div>
</template>

<style scoped lang="scss">

.animaCard2{
  margin: 10px;
  background-color: white;
  width: 380px;
  height: 120px;
  //display: flex;
  text-align: center;
  .textView{
    height: 50px;
    padding-top: 15px;

    p{
      font-size: 1.6em;
      font-family: Arial;
    }

  }
}

</style>